<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=yes" />
        <title>橡木匣子/首页</title>
        <link rel="shortcut icon" href="/public/img/logo.ico" type="image/x-icon" >
        <link rel="stylesheet" type="text/css" href="/public/css/home/details.css"/>
        <link rel="stylesheet" type="text/css" href="/public/css/styles.css"/>
        <link rel="stylesheet" type="text/css" href="/public/css/header.css"/>
        <link rel="stylesheet" href="/public/css/jquery-ui.css">
    </head>

    <body>
        <div id="container">
            #{include '_navbar.html' /}

            <div id="pageContent">

                <div id="content">

                    <!--最新部分内容-->
                    <div class="ziLiaoZhanShi" id="zuiXin">
                        <div id="pubul">
                            <ul>
                                #{list posts, as:'post'}

                                <li class="box">
                                    <a href="@{App.view_post(post.id)}">
                                        <div class="b_pic">
                                            #{head post.resources, as:'res',size:1}
                                            <img src="@{R.raw(res.hash,'thumb')}" />
                                            #{/head}
                                        </div>
                                    </a>
                                    <div class="b_text">
                                        <div class="tit">
                                            ${post.subject}
                                        </div>
                                        <ul class="biaoqian">
                                            #{head post.tags, as:'tag',size:5}
                                            <li><a href="@{App.tag(tag.name)}">${tag.name}</a></li>
                                            #{/head}
                                        </ul>
                                        <ul class="zanGuanzhu">
                                            <li class="zanImg"><img src="/public/img/home/tab_like.png" /></li>
                                            <li class="zanCounts">${post.cnt_voteup}</li>
                                            <li class="guanzhuImg"><img src="/public/img/home/tab_collect.png" /></li>
                                            <li class="guanzhuCounts">${post.cnt_favorite}</li>
                                        </ul>
                                        <div class="jieShao" style="text-overflow: ellipsis;"><!--style="text-overflow: ellipsis;"-->
                                            ${post.summary}
                                        </div>
                                    </div>
                                </li>


                                #{/list}

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            #{include '_footer.html' /}
        </div>
        <script src="/public/js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
        <script src="/public/js/jquery.masonry.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="/public/js/jquery.autocomplete.js" type="text/javascript" charset="utf-8"></script>
        <script src="/public/js/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $.widget("custom.catcomplete", $.ui.autocomplete, {
                _renderMenu: function (ul, items) {
                    var that = this,
                            currentCategory = "";
                    $.each(items, function (index, item) {
                        if (item.category != currentCategory) {
                            ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
                            currentCategory = item.category;
                        }
                        that._renderItemData(ul, item);
                    });
                }
            });
        </script>

        <script type="text/javascript">
            $(function () {
                $(window).resize(function () {
                    location.reload(true);
                });

                //实现瀑布流插件
                var $container = $('#pubul');
                $container.imagesLoaded(function () {
                    $container.masonry({
                        itemSelector: '.box',
                        columnWidth: 5 //每两列之间的间隙为5像素
                    });
                });


                $(".userinfo").hover(function () {
                    $(".info").slideDown("fast");
                }, function () {
                    $(".info").slideUp("10");
                })
                //及时搜索
                var countries = [
                    {value: '室内设计', data: '', category: '分类'},
                    {value: '室内装修', data: '室内', category: '分类'},
                    {value: '室内环保', data: '室内', category: '分类'},
                    {value: '室内设计', data: '室内', category: '分类'},
                    {value: '室内设计', data: '室内', category: '分类'},
                    {value: '某宾馆室内设计', data: '室内', category: '话题'},
                    {value: '某大厦室内设计', data: '室内', category: '话题'},
                    {value: '某宾馆室内设计', data: '室内', category: '资料'},
                    {value: '某大厦室内设计', data: '室内', category: '资料'},
                    {value: '某宾馆室内设计', data: '室内', category: '资料'},
                    {value: '某大厦室内设计', data: '室内', category: '资料'},
                    {value: '更多室内相关资料...', data: '室内', category: '更多'},
                    // ...
                    {value: 'Zimbabwe', data: 'ZZ'}
                ];


                $('#autocomplete').catcomplete({
                    delay: 0,
                    source: countries

                });

            })
        </script>
    </body>
</html>
